<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script src='./vue.js'></script>
<link rel="stylesheet" href="./01-购物车作业/index.css">
<script src="./01-购物车作业/data.js"></script>
</head>
<body>
<div id='app'>
    <button @click="isAll">全选</button>
    <button @click="reverse">反选</button>
    <h1>总价：￥ {{price}}</h1>
    <box  @select="Select" v-for="(item, index) in goods" :key="index" :item="item" :index="index" :key="item.id" ref="section"></box>
</div>

</body>
<template id="box">
    <div class="box">
        <img v-show="!isflag" class="cho" src="./01-购物车作业/choose.png" @click="isFlag" alt="">
        <img v-show="isflag" class="cho" src="./01-购物车作业/choose2.png" @click="isFlag" alt="">
        <img class="logo" :src="item.img " alt="">
        <h3>{{item.title}}</h3>
        <h5>价格：￥{{item.price}}</h5>
        <h1>组件总价：{{(item.price*item.number).toFixed(2)}}元</h1>
        <section>
            <button @click="item.number>1?item.number--:item.number=1" >-</button>
            <input type="text" v-model.number="item.number">
            <button @click="item.number++">+</button>
        </section>
    </div>
</template>

<script>
//box
const box={
    data() {
        return {
            isflag:false
        }
    },
    template:'#box',
    computed:{

    },
    props:['item','index'],
    methods:{
        select(val){
            this.$emit('select', val);
        },
        isFlag(){
            this.isflag=!this.isflag
            this.item.isFlag=!this.item.isFlag
            console.log(this.item);
        }
    }
}

//app
const app = {
data() {
return {
    goods,
}
},
computed:{
    price(){
       return this.goods.reduce((num,item)=>{
        return num+=(item.isFlag? (item.price*item.number):0)
       },0).toFixed(2)

    }
},
methods: {
    Select(val){
        this.goods[val].isFlag=!this.goods[val].isFlag;
        console.log(goods);
    },
    isAll(){
        let sure=this.goods.every(item=>{
            item.isFlag===true
        })
        if(!sure){
            this.goods.forEach((item,index)=>{
                item.isFlag=true
                this.$refs.section[index].isflag=true
            })
        }
    },
    reverse(){
        this.goods.forEach((item,index)=>{
            item.isFlag=!item.isFlag
            this.$refs.section[index].isflag=!this.$refs.section[index].isflag
        })
    }
},
mounted() {
    this.goods.forEach(item => {
        this.isFlag='flase'
        item.id=Math.random()
    });
},
components:{box}
}
const vm = Vue.createApp(app).mount('#app')
</script>
</html>